<!--
* @author wn
* @date 2022/09/05 11:11:48
* @description: 数据 由 vuex 提供
!-->
<template>
	<div class="home-overview">
		<!-- 用户信息 -->
		<div class="user-meta">
			<img v-lazy="$store.state.user.profile.avatar" class="avatar" />
			<h4>
				{{
					$store.state.user.profile.nickname ||
					$store.state.user.profile.account
				}}
			</h4>
		</div>
		<!-- 设置 -->
		<div class="user-item">
			<a href="javascript:;">
				<span class="iconfont icon-hy"></span>
				<p>会员中心</p>
			</a>
			<a href="javascript:;">
				<span class="iconfont icon-aq"></span>
				<p>安全设置</p>
			</a>
			<a href="javascript:;">
				<span class="iconfont icon-dw"></span>
				<p>地址管理</p>
			</a>
		</div>
	</div>
</template>
<script>
export default {
	name: 'HomeOverview',
}
</script>
<style scoped lang="less">
.home-overview {
	display: flex;
	height: 132px;
	background: url(~@/assets/images/center-bg.png) no-repeat center / cover;
	.user-meta {
		display: flex;
		align-items: center;
		flex: 1;
		.avatar {
			width: 85px;
			height: 85px;
			border-radius: 50%;
			margin: 0 26px 0 60px;
		}
		h4 {
			font-size: 18px;
			font-weight: 500;
			color: white;
		}
	}
	.user-item {
		display: flex;
		justify-content: space-around;
		align-items: center;
		flex: 1;
		// text-align: center;
		a {
			display: flex;
			flex-direction: column;
			align-items: center;
			color: #fff;
			font-size: 16px;
			span {
				font-size: 32px;
			}
			p {
				line-height: 32px;
			}
		}
	}
}
</style>
